<template>
  <div class="bigbox">
    <div class="topbox">
      <el-form
        :model="form"
        ref="form"
        label-position="left"
        label-width="80px"
        onsubmit="return false"
      >
        <el-row :gutter="20">
          <el-col :span="5">
            <el-form-item label="用电企业">
              <FilterSelect2
                v-model="form.companyId"
                :optionlist="companyList"
                :valuekey="{ name: 'name', value: 'id' }"
                @changeSelect="companyChange"
              ></FilterSelect2>
            </el-form-item>
          </el-col>
          <el-col :span="6" style="margin-top: 4px; display: flex">
            <el-radio-group
              v-model="radio"
              size="small"
              style="margin-right: 20px"
            >
              <el-radio-button label="日" />
              <el-radio-button label="月" />
              <el-radio-button label="年" />
            </el-radio-group>
            <el-date-picker
              style="flex: 1"
              v-model="date"
              size="small"
              :type="
                this.radio == '日'
                  ? 'date'
                  : this.radio == '月'
                  ? 'month'
                  : 'year'
              "
              :format="
                this.radio == '日'
                  ? 'yyyy-MM-dd'
                  : this.radio == '月'
                  ? 'yyyy-MM'
                  : 'yyyy'
              "
              placeholder="选择时间"
            >
            </el-date-picker>
          </el-col>
          <el-col :span="13" style="text-align: right">
            <el-form-item>
              <Twobtn @chaxun="chaxun" @chongzhi="chongzhi"></Twobtn>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div class="bodybox">
      <div class="top" v-loading="loading2">
        <div v-if="e2" id="ynqs" style="width: 100%; height: 90%"></div>
      </div>
      <div class="bottom">
        <div class="top2">
          <div class="tit2"></div>
          <div class="tabs">
            <span>
              <el-button
                class="button"
                @click="exporttab"
                size="small"
                type="primary"
                style="margin-right: 20px"
              >
                导出
              </el-button>
              <!-- <i
                @click="isshow = 'echart'"
                :style="{
                  color: isshow === 'echart' ? '#007cee' : '#000',
                  'margin-right': '10px',
                }"
                class="iconfont icon-zhuzhuangtutubiao"
              ></i>
              <i
                @click="isshow = 'table'"
                :style="{
                  color: isshow === 'table' ? '#007cee' : '',
                  'margin-right': '10px',
                }"
                class="iconfont icon-biaoge"
              ></i> -->
            </span>
          </div>
        </div>

        <el-table
          v-loading="loading4"
          :data="tableList"
          style="width: 99%"
          height="35vh"
          border
          ref="table"
          :header-cell-style="{
            background: '#f5f5f5',
            'text-align': 'center'
          }"
        >
          <template slot="empty">
            <el-empty description="暂无数据"></el-empty>
          </template>
          <el-table-column
            type="index"
            align="center"
            label="序号"
            width="100px"
          >
          </el-table-column>
          <el-table-column prop="companyName" label="用电企业">
          </el-table-column>
          <el-table-column prop="className" label="设备名称"> </el-table-column>
          <el-table-column align="center" prop="dateTime" label="日期">
          </el-table-column>
          <el-table-column align="right" prop="usageValue" label="用电量(kWh)">
            <template slot-scope="scope">
              {{ scope.row.usageValue.toFixed(2) }}
            </template>
          </el-table-column>
          <el-table-column
            align="right"
            prop="companyUsageValue"
            label="企业总用电量(kWh)"
          >
            <template slot-scope="scope">
              {{ scope.row.companyUsageValue.toFixed(2) }}
            </template>
          </el-table-column>
          <el-table-column align="right" prop="usageRatio" label="能耗占比(%)">
            <template slot-scope="scope">
              {{ scope.row.usageRatio.toFixed(2) + '%' }}
            </template>
          </el-table-column>
        </el-table>
        <!-- 底部分页 -->
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import { getCompanyListApi } from '@/api/energy-consumption/Equipment-energy/Energy-analysis'
import dayjs from 'dayjs'

import { exportexcel } from '@/utils/excel'
import {
  getRankUsageApi,
  getTableListApi
} from '@/api/energy-consumption/Equipment-energy/Ranking'
export default {
  name: 'RankingIndex',
  data() {
    return {
      radio: '日',
      form: {},
      tableList: [],
      date: null,
      loading1: false,
      loading2: false,
      loading3: false,
      loading4: false,
      companyList: [],
      UsagePieList: [],
      UsageLineList: [],
      ComparisonLineList: [],
      ProportionData: {},
      e1: true,
      e2: true,
      e3: true
    }
  },
  watch: {
    radio: {
      handler(newValue) {
        if (this.radio === '日') {
          this.date = dayjs().format('YYYY-MM-DD')
        } else if (this.radio === '月') {
          this.date = dayjs().format('YYYY-MM')
        } else if (this.radio === '年') {
          this.date = dayjs().format('YYYY')
        }
      },
      immediate: true
    },

    date: {
      handler(newValue) {
        if (this.radio === '日') {
          this.date = dayjs(newValue).format('YYYY-MM-DD')
        } else if (this.radio === '月') {
          this.date = dayjs(newValue).format('YYYY-MM')
        } else if (this.radio === '年') {
          this.date = dayjs(newValue).format('YYYY')
        }
      },
      immediate: true,
      deep: true
    }
  },
  async created() {
    await this.getCompanyList()
    await this.getdatalist()
  },
  methods: {
    companyChange(val) {
      localStorage.setItem('companyId', val)
    },
    // 获取用电企业列表
    async getCompanyList() {
      const res = await getCompanyListApi()
      console.log(res)
      this.companyList = res.data.list
      const companyId = +localStorage.getItem('companyId')
      if (companyId && this.companyList.find((i) => i.id == companyId)) {
        this.$set(this.form, 'companyId', companyId)
      } else {
        this.$set(this.form, 'companyId', this.companyList[0].id)
      }
    },
    // 初始化
    async getchushihua() {
      this.form.companyId = this.companyList[0].id
      localStorage.setItem('companyId', this.companyList[0].id)
      this.radio = '日'
      this.isshow = 'echart'
    },

    // 能耗排名柱状图
    async getUsageLine() {
      this.e2 = false
      this.loading2 = true
      const res = await getRankUsageApi({
        companyId: this.form.companyId,
        dateType: this.radio === '日' ? 1 : this.radio === '月' ? 2 : 3,
        dateString: this.date
      })
      console.log('2', res.data.list)
      this.UsageLineList = res.data.list
      this.e2 = true
      this.loading2 = false
    },

    // 表格
    async getTableList() {
      this.e4 = false
      this.loading4 = true
      const res = await getTableListApi({
        companyId: this.form.companyId,
        dateString: this.date,
        dateType: this.radio === '日' ? '1' : this.radio === '月' ? '2' : '3'
      })
      this.tableList = res.data.list
      this.e4 = true
      this.loading4 = false
    },
    exporttab() {
      exportexcel(
        '/ecm-microservice-biz/ecm/usage/rank/export',
        {
          dateType: this.radio === '日' ? 1 : this.radio === '月' ? 2 : 3,
          dateString: this.date,
          companyId: this.form.companyId
        },
        '能耗排名'
      )
    },
    // 获取数据
    async getdatalist() {
      const promises = [this.getUsageLine().then(() => this.myChart2())]
      this.getTableList()

      // 等待所有Promise完成
      await Promise.all(promises)
    },

    myChart2() {
      const series = {
        type: 'bar',
        emphasis: {
          focus: 'series'
        },
        data: this.UsageLineList.map((obj) => {
          return [obj.valueReading, obj.timeReading]
        })
      }
      console.log(series)
      //   const legend = this.UsageLineList.map(i => i.timeReading)
      //   console.log('time', time)
      const myChart2 = echarts.init(document.getElementById('ynqs'))

      myChart2.setOption({
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        // legend: {
        //   top: 20
        // },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'value'
        },
        yAxis: {
          type: 'category'
          //   data: legend
        },
        series: series
      })
      window.addEventListener('resize', () => {
        // 图表响应处理
        myChart2.resize()
      })
    },
    chaxun() {
      this.getdatalist()
    },

    async chongzhi() {
      await this.getchushihua()
      this.getdatalist()
    }
  }
}
</script>

<style lang="scss" scoped>
// ::v-deep .el-select {
//   width: 100%;
// }

.bigbox {
  display: flex;
  flex-direction: column;
  padding: 10px;
  background-color: #f1f1f1;
  height: 100%;
  .topbox {
    background-color: #fff;
    padding: 20px;
    height: 80px !important;
    width: 100% !important;
    margin-bottom: 10px;
    // transition-property: all;
    // transition-duration: 0.2s;

    .chaxun {
      background-color: #1890ff;
      color: #fff;
    }
  }
  .bodybox {
    flex: 1;
    display: flex;
    flex-direction: column;
    .top {
      display: flex;
      background-color: #fff;
      height: 45%;
      width: 100%;
    }
    .bottom {
      flex: 1;
      background-color: #fff;
      padding: 0 20px;
      .top2 {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 10px;
        .tit2 {
          display: flex;
          align-items: center;
          font-weight: bold;
          img {
            margin-right: 10px;
          }
        }
        .tabs {
          i:hover {
            color: #2194ff;
            cursor: pointer;
          }
        }
      }
    }
  }
}

// ::v-deep .el-form-item {
//   width: 100%;
//   margin-left: -10px;
// }

// ::v-deep .el-form-item__content {
//   width: calc(100% - 100px);
// }
// ::v-deep .el-col-6 {
//   height: 40px;
//   text-align: right;
// }
// ::v-deep .el-input__inner {
//   height: 32px;
// }
// ::v-deep.el-form--inline {
//   height: 100% !important;
//   box-sizing: border-box;
// }

// ::v-deep .el-input__icon {
//   line-height: 20px;
// }
</style>
